<template>
  <el-header class="cc-display">
    <el-row :gutter="0" class="so_middle">
      <el-col :span="6">
        <div class="sc-display height100">
          <el-image
            :src="'/imgs/webheader/logo.png'"
            style="width: 24px; height: 24px; margin: 2px 5px 0 0"
          >
          </el-image>
          <span class="font24b">学涯在线网</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="cc-display height100">
          <div>
            <el-input
              placeholder="请输入内容"
              v-model="searchInput"
              class="input-with-select myselect"
            >
              <el-select
                v-model="searchSelect"
                slot="prepend"
                placeholder="请选择"
              >
                <el-option label="全部" value="1"></el-option>
                <el-option label="课程" value="2"></el-option>
                <el-option label="讲师" value="3"></el-option>
              </el-select>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchSubmit()"
              ></el-button>
            </el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="ec-display height100">
          <div>
            <span class="font16b useraccount" @click="isUserLogin()">{{
              $store.state.islogin.userName
            }}</span>
          </div>
          <div class="userbox cc-display">
            <i class="el-icon-user-solid font20a"></i>
          </div>
        </div>
      </el-col>
    </el-row>
    <transition name="el-fade-in-linear">
      <LoginBox v-if="$store.state.isloginBox" msg="login" />
    </transition>
  </el-header>
</template>

<script>
import LoginBox from "@/components/LoginBox.vue";

export default {
  name: "WebHeader",
  components: {
    LoginBox
  },
  props: {
    msg: String
  },
  data() {
    return {
      searchInput: "",
      searchSelect: "1",
      userName: ""
    };
  },
  created() {
    this.getLoginStatus();
    this.$store.commit("changeIsLogin", {
      flag: localStorage.getItem("isLoginFlag") ?? false,
      userName: localStorage.getItem("isLoginUserName") ?? "未登录"
    }); // 登录状态
  },
  methods: {
    /**
     * @method isUserLogin && 用户登录框是否展示
     * @author jeq && 2020-11-23
     */
    isUserLogin() {
      if (!this.$store.state.islogin.flag) {
        this.$store.commit("changeIsLoginBox", true); // vuex 登录框是否展示
      }
    },

    /**
     * @method searchSubmit && 搜索框输入值存储内存
     */
    searchSubmit() {
      this.$store.commit("changeSearchInputText", this.searchInput);
    },

    /**
     * @method getLoginStatus && 进入时判断用户登录状态
     */
    getLoginStatus() {
      this.axios.get("nc_search/login_status").then(res => {
        if (res.data == null) {
          this.$store.commit("changeIsLogin", {
            flag: false,
            userName: "未登录"
          });
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-header {
  padding: 0;
  background-color: rgba($color: #000000, $alpha: 0.75);
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1800;
}

.el-row {
  height: 100%;
}

.el-col {
  height: 100%;
}

.height100 {
  height: 100%;
}

.useraccount:hover {
  cursor: pointer;
}

.userbox {
  width: 28px;
  height: 28px;
  border-radius: 17px;
  margin-left: 6px;
  background-color: #f7f7f7;
}
</style>
